<template>
  <div id="search">
    <ul>
      <div v-for="(item, i) in routerFilter" :key="i">
        <li @click="routerLinkTos(item)">
          <div>•</div>
          {{ item.meta.title }}
        </li>
        <routingQuery :routerFilter="item.children" />
      </div>
    </ul>
  </div>
</template>

<script>
export default {
  name: "routingQuery",
  props: ["RouterList", "listGeometry"],
  data() {
    return {
      routerFilter: [],
    };
  },
  watch: {
    //搜索框发生改变触发
    listGeometry() {
      this.setRouter();
    },
  },

  methods: {
    setRouter() {
      var that = this;
      that.routerFilter = [];
      function getId(routers, routerList) {
        routers.forEach((item) => {
          if (item.meta.title == that.listGeometry[item.name]) {
            that.routerFilter.push(item);
          }
          if (item.children && item.children.length > 0) {
            getId(item.children, routerList);
          }
        });
      }
      getId(that.RouterList, that.routerFilter);
    },
    //路由跳转
    routerLinkTos(item) {
      console.log(item);
      let _this = this;
      // 恢复右侧默认选项
      _this.$store._mutations.CURRENT_INDEX[0]("ds-cloud-0");
      //跳转对应路由
      _this.$store._mutations.ROUTER_NAME[0](item.name);
      //左侧路由高亮
      _this.$store._mutations.CURRENT[0](item.meta.title);
      //处理左侧展开项 => 未处理
      const routers = _this.$router.options.routes;
      function getCurrent(route) {
        for (let index = 0; index < route.length; index++) {
          if (route[index].children && route[index].children.length > 0) {
            for (let i = 0; i < route[index].children.length; i++) {
              if (item.name == route[index].children[i].name) {
                route[index].meta.defaultState = true;
                _this.$emit("updateRef");
              }
            }
          }
        }
      }
      getCurrent(routers);
    },
  },
};
</script>

<style scoped>
ul {
  width: 280px;
}

li {
  padding: 6px 0;
  position: relative;
  display: table;
  margin: 0 auto;
  padding: 4px 0;
  font-family: Lato, sans-serif;
  color: rgb(139, 138, 138);
  text-decoration: none;
  transition: 0.5s;
}
li::after {
  position: absolute;
  content: "";
  top: 100%;
  left: 0;
  width: 100%;
  height: 3px;
  background: #3498db;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s;
}

li:hover {
  color: #118bfd;
  cursor: pointer;
}

li:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

li div {
  position: absolute;
  left: -21px;
  top: -6px;
  font-size: 27px;
}
</style>